<template>
  <div class="connection-config edge-set-scroll-y">
    <div class="config-header">
      <div class="header-text">节点连接配置</div>
      <div class="edge-config-btn">
        <a-icon-font type="iconicon-beifen1" @click="configClose()" />
      </div>
    </div>
    <!-- 左右节点 选择属性 -->
    <div class="node-selector">
      <attributes-selector
        :left="leftHeaderName"
        :right="rightHeaderName"
        :data="data"
        @left-change="leftChange"
        @right-change="rightChange"
      />
    </div>
    <!-- 根据添加的属性 展示节点详情 -->
    <div class="node-details">
      <div class="subtitle">节点详情</div>
      <div>
        <node-details
          class="details"
          :table-info="leftTableInfo"
          :left="leftHeaderName"
          :right="rightHeaderName"
          :type="1"
          @check-column="checkColumn"
        />
        <node-details
          class="details"
          :table-info="rightTableInfo"
          :left="leftHeaderName"
          :right="rightHeaderName"
          :type="2"
          @check-column="checkColumn"
        />
      </div>
    </div>
    <div class="connection-recommend">
      <div class="subtitle">连接推荐</div>
      <connection-recommend
        :edge-config-data="configData"
        :data="data"
        :left-header-name="leftHeaderName"
        :right-header-name="rightHeaderName"
        class="recommend"
        @select-clause="selectClause"
      />
    </div>
    <!-- 按钮 -->
    <div class="config-footer">
      <a-button class="edge-drawer-btn" type="default" @click="configClose()"
        >取消
      </a-button>
      <a-button class="edge-drawer-btn" type="primary" @click="handleOk"
        >确定
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import NodeDetails from '@/components/graph/nodeDetails.vue'
import ConnectionRecommend from '@/components/graph/connectionRecommend.vue'
import AttributesSelector from '@/components/graph/attributesSelector.vue'
import GraphBuild from '@/store/modules/graphbuild'
import { graphSaveEdgeConfigure, tcolumnQueryDetail } from '@/api/visualization'

@Component({
  components: {
    AttributesSelector,
    NodeDetails,
    ConnectionRecommend,
  },
  directives: {
    focus: {
      inserted: (element: any) => {
        element.focus()
      },
    },
  },
})
export default class NodeConnectionConfig extends Vue {
  @Prop({ default: () => ({}) }) data!: any
  @Prop({ default: () => ({}) }) configData!: any // 配置信息

  // 左右节点的选择 value
  public leftHeaderName: any = ''
  public rightHeaderName: any = ''

  // 左表 详情
  public leftTableInfo: any = null

  // 右表 详情
  public rightTableInfo: any = null

  // auto join 推荐
  public autoJoinRecommendation: any = null

  @Watch('configData', { immediate: true })
  public configDataChange(value: any) {
    if (Object.keys(value).length > 0) {
      this.leftHeaderName = value.leftHeaderName
      this.rightHeaderName = value.rightHeaderName
      this.autoJoinRecommendation = value.autoJoinRecommendation
      this.queryTableDetail(value.leftTableName, 1)
      this.queryTableDetail(value.rightTableName, 2)
    }
  }

  // 关闭
  public configClose() {
    GraphBuild.setEdgeSetDrawerStatus(false)
  }

  public selectClause(clause: any) {
    console.log(clause)
    this.leftHeaderName = clause.leftHeaderName
    this.rightHeaderName = clause.rightHeaderName
  }

  public leftChange(value: any) {
    this.leftHeaderName = value
  }

  public rightChange(value: any) {
    this.rightHeaderName = value
  }

  /**
   * (节点)表的详情
   */
  public queryTableDetail(tableName: string, type: number) {
    const queryData: any = {
      taskId: Number(this.$route.params.taskid),
      table: tableName,
    }

    tcolumnQueryDetail({
      data: queryData,
    }).then((response) => {
      if (response.data.code === 100) {
        if (type === 1) {
          // this.leftTableInfo = response.data.result
          this.leftTableInfo = this.filterTableColumn(
            response.data.result,
            this.data.sourceNode
          )
        } else {
          // this.rightTableInfo = response.data.result
          this.rightTableInfo = this.filterTableColumn(
            response.data.result,
            this.data.targetNode
          )
        }
      }
    })
  }

  public filterTableColumn(tableInfo: any, filterInfo: any) {
    const nameList: any[] =
      filterInfo.attrs.length > 0
        ? filterInfo.attrs.map((attribute: any) => attribute.name)
        : []
    nameList.push(filterInfo.keyAttr.name)
    const head: any = tableInfo.head.filter((item: any) =>
      nameList.includes(item.name)
    )
    const data: any = tableInfo.data.splice(0, 5)
    return {
      page: tableInfo.page,
      head,
      data,
    }
  }

  /**
   * 通过点击节点详情列 切换 select中的值
   * @param info
   * leftHeaderName
   * rightHeaderName
   */
  public checkColumn(info: any) {
    // 左节点
    if (info.type === 1) {
      this.leftHeaderName = info.column.name
    } else {
      this.rightHeaderName = info.column.name
    }
  }

  // public handleCancel() {
  //     // this.$emit('close')
  // }

  public getGraphId(): number {
    return Number.parseInt(localStorage.getItem('graphId') || '0', 10)
  }

  public handleOk() {
    const data: any = {
      graphId: this.getGraphId(),
      edgeId: this.configData.id,
      leftHeaderName: this.leftHeaderName,
      rightHeaderName: this.rightHeaderName,
    }
    graphSaveEdgeConfigure({ data }).then(() => {
      this.$message.success('保存成功！', 0.8)
      this.configClose()
      // console.log('save edge config', response.data)
      this.$emit('set-connection-config', data)
    })
  }
}
</script>

<style lang="less" scoped>
.connection-config {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 20px 72px;
  width: 574px;
}

.config-header {
  align-items: center;
  border-bottom: 1px solid #eee;
  border-bottom-width: length(574px);
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.header-text {
  color: #373b52;
  font-size: 16px;
  font-weight: bold;
}

.node-selector {
  padding-bottom: 20px;
}

.node-details {
  > div {
    display: flex;
    justify-content: space-between;
  }

  .details {
    width: 48%;
  }
}

// 推荐
.connection-recommend {
  padding-top: 20px;
}

.edge-config-btn {
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  height: 20px;
  right: 20px;
}

// 尾部 按钮
.config-footer {
  border-radius: 4px;
  //background-color: #fff;
  bottom: 20px;
  position: absolute;
  right: 20px;

  .edge-drawer-btn {
    margin-left: 20px;
  }
}

.edge-set-scroll-y {
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}

.subtitle {
  color: #373b52;
  font-size: 14px;
  letter-spacing: 1px;
  padding-bottom: 10px;
}
</style>
